<template>
  <div id="Member">
    <!-- <h1>会员</h1> -->
    <el-row id="memrow">
      <el-col :span="24"
        ><div class="mycontent mydark">
          <!-- 注册手机： -->
          <el-input class="phone" placeholder="注册手机号" v-model="input2">
          </el-input>
          <!-- 会员归属 -->
          <!-- 会员归属： -->
          <el-select
            v-model="Memvalue"
            class="status"
            filterable
            placeholder="会员归属"
          >
            <el-option
              v-for="item in memData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- 会员状态 -->
          <el-select v-model="Stavalue" class="status" placeholder="会员状态">
            <el-option
              v-for="item in memStatus"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- 注册来源 -->
          <el-select
            v-model="rigistvalue"
            class="status"
            placeholder="注册来源"
          >
            <el-option
              v-for="item in registData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- 排序方式 -->
          <el-select v-model="sortvalue" class="status" placeholder="排序方式">
            <el-option
              v-for="item in sortData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- 搜索 -->
          <el-button type="primary" id="sousuo">搜索</el-button>
          <el-button type="primary" plain>分配会员归属</el-button>
          <el-button type="success" plain @click="login"
            >允许/禁止登录</el-button
          >
        </div>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <el-table
            align="center"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
              prop="name"
              label="会员"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="rigistData"
              label="注册时间"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="source"
              label="注册来源"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="登录次数"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="lastdate"
              label="最近登录"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              style="color: red"
              prop="asc"
              label="会员归属"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="会员状态"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop=""
              label="操作"
              show-overflow-tooltip
              align="center"
            >
              <template scope="scope">
                <i class="el-icon-edit see" @click="selectmem(scope.row)"
                  >查看</i
                >
              </template>
            </el-table-column>
          </el-table>
        </div></el-col
      >
    </el-row>
    <!-- 弹出框 -->
    <LoginDli
      :loginVisible="dialogVisible"
      @closeDli="myclose"
      :changeData="multipleSelection"
    ></LoginDli>
  </div>
</template>

<script>
import "element-ui/lib/theme-chalk/index.css";
import LoginDli from "../components/LoginDli";
export default {
  name: "Member",
  components: {
    LoginDli,
  },
  data() {
    return {
      input2: "", //手机号
      Memvalue: "", //会员归属
      Stavalue: "", //会员状态
      rigistvalue: "", //注册来源
      sortvalue: "", //排序
      loginStatus: 1, //判断会员状态
      memData: [
        //会员归属
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
        { id: 3, name: "王五" },
        { id: 4, name: "赵六" },
        { id: 5, name: "张力" },
      ],
      memStatus: [
        //会员状态
        { id: 1, name: "允许登录" },
        { id: 2, name: "禁止登录" },
      ],
      registData: [
        //注册来源
        { id: 1, name: "APP android" },
        { id: 2, name: "APP ios" },
        { id: 3, name: "WEB" },
      ],
      sortData: [
        //排序
        { id: 1, name: "按注册时间倒序" },
        { id: 2, name: "按登录次数倒序" },
        { id: 3, name: "按最近登录时间倒序" },
      ],
      /* 表格数据 */
      tableData: [
        {
          name: "张三",
          rigistData: "2015-04-08 13：56",
          source: "APP android",
          count: "1",
          lastdate: "2015-04-08 13：56",
          asc: "未分配",
          status: "允许登录",
        },
        {
          name: "张三",
          rigistData: "2015-04-08 13：56",
          source: "APP android",
          count: "2",
          lastdate: "2015-04-08 13：56",
          asc: "未分配",
          status: "允许登录",
        },
        {
          name: "张三",
          rigistData: "2015-04-08 13：56",
          source: "APP android",
          count: "1",
          lastdate: "2015-04-08 13：56",
          asc: "未分配",
          status: "允许登录",
        },
      ],
      /* 多选 */
      multipleSelection: [],
      /* 允许/禁止弹出框状态 */
      dialogVisible: false,
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    /* 登录弹框 */
    login() {
      this.dialogVisible = true;
    },
    /* 关闭弹框 */
    myclose(data) {
      this.loginStatus = data;
      // console.log(data);
      // console.log(this.loginStatus);
      this.dialogVisible = false;
    },
    /* 查看会员详情 */
    selectmem(row) {
      console.log(row);
      this.$router.push({
        path: "/Home/Homemin/ZxHousingManager",
        query: { row: row },
      });
    },
  },
};
</script>

<style scoped>
/* 第一行 */

#sousuo {
  margin-left: 10px;
}
.mycontent {
  border-radius: 4px;
  min-height: 80px;
}
.phone {
  width: 200px;
  margin-right: 10px;
}
.status {
  width: 130px;
  margin-left: 10px;
}
.see {
  color: blue;
  cursor: pointer;
}
#memrow {
  margin-top: 10px;
  text-align: center;
}
#Member {
  width: 98%;
  margin: 0 auto;
}
.el-select .el-input {
  width: 120px;
}
</style>